<template>
  <el-dialog :visible.sync="visible" :title="title"
             @closed='closedDialog'>
    <KImgField :field="field"
               :fieldIndex="field.index"
               @del="deleteImg"
               @clickImg="previewImg"
               :uploadPath="uploadPath"
               @upload="addImgDemo"/>
    <span class="dialog-footer" slot="footer">
        <el-button @click="closedDialog">取 消</el-button>
        <el-button @click="commit" type="primary">确 定</el-button>
    </span>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="showImgPreview" append-to-body>
      <img style="display: flex; margin: auto; max-width: 700px; max-height: 500px; " :alt="this.imgTitle" :src="this.imgPath">
    </el-dialog>
  </el-dialog>
</template>

<script>
import KImgField from "../knowledge/knowledgeEdit/KImgField";
export default {
  name: "ImportImageDialog",
  components: {
    KImgField,
  },
  props: {
    uploadPath: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      showImgPreview: false,
      imgTitle: '',
      imgPath: '',
      title: '上传图片',
      visible: false,
      field: {
        index: 0,
        fieldValue: {
                  type: '',
                  additional: '',
                  classification: '',
                  title: '',
                  comment: '',
                  paths: []
              }
          }
        }
      },
      methods:{
          previewImg(fieldIndex, imgIndex) {
            this.showImgPreview = true
            this.imgPath = this.field.fieldValue.paths[imgIndex]
            this.imgTitle = this.field.fieldValue.title
          },
          addImgDemo(fieldIndex, imgPath) {
              this.field.fieldValue.paths.push(imgPath)
          },
          deleteImg(fieldIndex, imgIndex) {
              this.field.fieldValue.paths.splice(imgIndex, 1)
          },
          commit: function() {
            if (!this.field.fieldValue.type){
              this.$message.warning('图片类型不能为空')
              return
            }
            if (this.field.fieldValue.paths.length) {
              let param = new URLSearchParams();
              param.append("fieldValue", JSON.stringify(this.field.fieldValue))
              this.axios.post('/pmph/action/kindEditor/parseKnowledgeFieldImageType', param)
                  .then((response) => {
                  this.$parent.editor.afterFocus()
                  // 如果是修改, 则清理之前的图片和图题图注;
                  if (this.title == '修改图片'){
                    // 如果原值为行内图, 则直接替换;
                    var image_type_str_ori = this.$parent.editor.plugin.getSelectedImage().attr('class')
                    if (image_type_str_ori.indexOf('hnt') != -1) {
                      var tempEl = document.createElement('div')
                      tempEl.innerHTML = response.data.html
                      this.$parent.editor.plugin.getSelectedImage().replaceWith(tempEl)
                      KindEditor(tempEl, this.$parent.editor.cmd.doc).remove(true)
                    }
                    // 原值不是行内图, 则需要删除图题图注;
                    else{
                      var imgParent = this.$parent.editor.plugin.getSelectedImage().parent()
                      var img = imgParent.first()
                      var cnt_doc = this.$parent.editor.cmd.doc
                      // 删除原图题图注
                      if (cnt_doc.getElementById('p_title_' + img.attr('id'))) {
                        cnt_doc.getElementById('p_title_' + img.attr('id')).remove()
                      }
                      if (cnt_doc.getElementById('p_note_' + img.attr('id'))) {
                        cnt_doc.getElementById('p_note_' + img.attr('id')).remove()
                      }
                      if (cnt_doc.getElementById('t_title_' + img.attr('id'))) {
                        cnt_doc.getElementById('t_title_' + img.attr('id')).remove()
                      }
                      if (cnt_doc.getElementById('t_note_' + img.attr('id'))) {
                        cnt_doc.getElementById('t_note_' + img.attr('id')).remove()
                      }
                      imgParent.html(response.data.html).remove(true)
                    }
                  }
                  else {
                    this.$parent.editor.insertHtml(response.data.html)
                  }
                  this.$parent.editor.afterBlur()
                  this.closedDialog()
                })
            }
        },
        closedDialog() {
          this.title = '上传图片'
          this.field.fieldValue.paths = []
          this.field.fieldValue.type = ''
          this.field.fieldValue.additional = ''
          this.field.fieldValue.classification = ''
          this.field.fieldValue.title = ''
          this.field.fieldValue.comment = ''
          this.visible = false
        }
      }
    }
</script>

<style scoped>

</style>
